<template>
  <div id="classes">
    <div class="section-head">
      <span>当前位置:-</span>
      <span class="classHomeName">班级管理</span>
    </div>

    <div class="massage">
      <p>
        <label>姓名:</label>
        <input type="text" placeholder="姓名" v-model="student.username" />
      </p>
      <p>
        <label>学号:</label>
        <input type="text" placeholder="学号" v-model="student.studentNum" />
      </p>
      <p>
        <label>手机号:</label>
        <input type="text" placeholder="手机号" v-model="student.phone" />
      </p>
      <p>
        <label>性别:</label>
        <input type="text" v-model="student.sex" />
      </p>
      <p>
        <label>年龄:</label>
        <input type="number" v-model="student.age" />
      </p>
      <p class="note">
        <label>班级:</label>
        <input type="text" name="" id="" v-model="student.note" />
      </p>
    </div>

    <div class="btn">
      <button type="button" @click="add">添加</button>
      <button type="button" @click="reset">重置</button>
    </div>

    <table>
      <thead>
        <tr>
          <th style="width: 100px">
            <input type="checkbox" @change="toggle" v-model="checked"/>
          </th>
          <th style="width: 100px">姓名</th>
          <th style="width: 150px">学号</th>
          <th style="width: 150px">手机号</th>
          <th style="width: 80px">性别</th>
          <th style="width: 80px">年龄</th>
          <th style="width: 150px">备注</th>
          <th style="width: 150px">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in student_list" :key="index">
          <td style="width: 100px">
            <input type="checkbox" v-model="item.checked" @change="toggleCheckd" />
          </td>
          <td style="width: 100px">{{ item.username }}</td>
          <td style="width: 120px">{{ item.studentNum }}</td>
          <td style="width: 150px">{{ item.phone }}</td>
          <td style="width: 80px">{{ item.sex }}</td>
          <td style="width: 80px">{{ item.age }}</td>
          <td style="width: 150px">{{ item.note }}</td>
          <td style="width: 150px">
            <button @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>



<script>
export default {
  template: "#classes",
  data() {
    return {
      checked: false,
      student: {
        username: "",
        studentNum: "",
        phone: "",
        sex: "",
        age: "",
        note: "",
        checked:false
      },
      student_list: [],
    };
  },
  methods: {
    add() {
      if (
        this.student.username.trim() == "" ||
        this.student.studentNum.trim() == "" ||
        this.student.phone.trim() == "" ||
        this.student.sex.trim() == "" ||
        this.student.age.trim() == "" ||
        this.student.note.trim() == ""
      ) {
        return alert("信息未填写完整");
      }
      var obj = {
        username: this.student.username,
        studentNum: this.student.studentNum,
        phone: this.student.phone,
        sex: this.student.sex,
        age: this.student.age,
        note: this.student.note,
      };
      this.student_list.unshift(obj);
      this.reset();
    },
    reset() {
      this.student = {
        username: "",
        studentNum: "",
        phone: "",
        sex: "",
        age: "",
        note: "",
      };
    },
    del(index) {
      this.student_list.splice(index, 1);
    },
    update(index) {
      let obj = this.student_list[index];
      this.student.username = obj.username;
      this.student.studentNum = obj.studentNum;
      this.student.phone = obj.phone;
      this.student.sex = obj.sex;
      this.student.age = obj.age;
      this.student.note = obj.note;
      this.del(index);
    },
    openModal(id) {
      this.studentId = id;
      this.changeModal = true;
    },
    toggle() {
      this.student_list.forEach((item) => {
        item.checked = this.checked;
      });
    },
    toggleCheckd() {
      var ckd = true;
      this.student_list.forEach((item) => {
        if (!item.checked) {
          ckd = false;
        }
      });
      this.checked = ckd;
    }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#classes {
  padding: 20px;
  box-sizing: border-box;
}
#classes .section-head {
  height: 30px;
  font-size: 12px;
}
#classes table {
  margin-top: 10px;
  text-align: center;
}
#classes table tr {
  height: auto;
}
.massage p {
  line-height: 30px;
}
.massage label {
  display: inline-block;
  width: 60px;
  line-height: 20px;
  font-size: 14px;
}
.massage input {
  width: 200px;
  line-height: 20px;
}
.massage .note {
  height: 56px;
}
.btn button {
  display: inline-block;
  margin-right: 30px;
}
</style>